<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-08 21:42:12
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-01-30 00:06:31
 * @FilePath: /tuberculosis_screening_app/src/components/common/PatientCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="patient">
    <div style="background: #f2fafd; padding: 8px; border-radius: 6px;">
      <div class="align-items_center"  >
      <!-- <van-badge content="男" color="#1989fa"> -->
      <van-image
        class="avatar mr_sm"
        round
        width="3rem"
        height="3rem"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <!-- </van-badge> -->

      <div class="flex">
        <div class="justify_between align-items_center">
          <p class="name">简一</p>
          <!-- <span class="card-num">24岁</span> -->
        </div>
        <div class="justify_between align-items_center">
          <p class="card-num">620423198812121212</p>
          <!-- <span class="card-num">藏族</span> -->
        </div>
      </div>
      <div>
        <van-button plain class="btn_small" type="primary" size="mini" round @click="navigate('/modules/patient/src/print')">患者信息打印</van-button>
      </div>
    </div>
    <hr class="mt_sm" />
    <div class="align-items_center justify_between mt_sm"  >
      <span class="card-num">24岁</span>
      <span class="card-num">男</span>

      <span class="card-num">藏族</span>
    </div>
    </div>
   

    <!-- <hr class="mt_sm" /> -->
    <div class="mt_xs" style="background: #f2fafd; padding: 8px; border-radius: 6px;">
      <p class="card-num">
        <span class="label">归属地区：</span><span>年龙乡</span>
      </p>
      <!-- <p class="card-num mt_xs">
        <span class="label">筛查次数：</span><span>1次</span>
      </p> -->
      <div class="card-num mt_xs justify_between align-items_center">
        <p><span class="label">筛查次数：</span><span>1次</span></p>

        <div class="align-items_center">
          <van-button plain class="btn_small" type="primary" size="mini" round @click="navigate('/modules/patient/src/symptom_editor')">修改</van-button>
          <van-button plain class="btn_small ml_xs" type="primary" size="mini" round  @click="navigate('/modules/patient/src/preview')">查看检验单</van-button>
 
        </div>
      </div>
      <p class="card-num mt_xs">
        <span class="label">人群分类：</span><span>非重点人群</span>
      </p>
      <p class="card-num mt_xs">
        <span class="label">筛查日期：</span><span>2023-11-14</span>
      </p>
      <p class="card-num mt_xs">
        <span class="label">筛查单位：</span><span>色达县年龙乡信息采集组</span>
      </p>
    </div>
    <!-- <hr class="mt_sm"> -->
    <div class="align-items_center justify_between mt_sm">
      <div class="item flex mr_sm">
        <van-button block size="small" class="btn px_sm" @click="navigate('/modules/patient/src/editor')">
          修改患者信息
        </van-button>
      </div>
      <div class="item flex">
        <van-button block size="small" class="btn px_sm" @click="navigate('/modules/patient/src/symptom_editor')"> 新增筛选 </van-button>
      </div>
    
    </div>
    <!-- <div class="patient-body">
      <div class="justify_between">
        <p><span class="label">姓 名：</span><span>简一 </span></p>
        <p><span class="label">性 别：</span><span>女 </span></p>
      </div>
      <div class="justify_between">
        <p><span class="label">年 龄：</span><span>24岁</span></p>
        <p><span class="label">名 族：</span><span>藏族</span></p>
      </div>
      <div>
        <p>
          <span class="label">身 份 证：</span><span>620423198812121212 </span>
        </p>
      </div>
      <p><span class="label">归属地区：</span><span>年龙乡</span></p>
      <p><span class="label">人群分类：</span><span>非重点人群</span></p>

      <div class="justify_between">
        <p><span class="label">筛查次数：</span><span>1次</span></p>

        <div class="align-items_center">
          <van-button
            class="btn px_xs"
            plain
            type="primary"
            size="mini"
            @click="navigate('/modules/patient/src/symptom_editor')"
          >
            修改
          </van-button>
          <van-button
            class="btn px_xs"
            plain
            type="primary"
            size="mini"
            @click="navigate('/modules/patient/src/preview')"
          >
            查看检验单
          </van-button>
        </div>
      </div>
      <p><span class="label">筛查日期：</span><span>2023-11-14</span></p>
      <p>
        <span class="label">筛查单位：</span><span>色达县年龙乡信息采集组</span>
      </p>
    </div>
    <div class="patient-footer align-items_center">
      <div class="item flex">
        <van-button class="btn px_xs" plain type="primary" block>
          修改患者信息
        </van-button>
      </div>
      <div class="item flex">
        <van-button class="btn px_xs" plain type="primary" block>
          新增筛选
        </van-button>
      </div>
      <div class="item flex">
        <van-button
          class="btn px_xs"
          plain
          type="primary"
          block
          @click="navigate('/modules/patient/src/print')"
        >
          患者信息打印
        </van-button>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { navigate } from '@/service/navigate';

export default defineComponent({
  setup() {
    return {
      navigate,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.patient {
  border-radius: map-get($radii, xs);
  // background-color: #fff;
  color: #161a1f;
  padding: map-get($spaces, sm);
  border: solid 1px #ededed;
  border-radius: 4px;
  padding: 8px;
  // background: #fafafb;
  hr {
    border: none;
    border-bottom: solid 1px #ededed;
  }
  .name {
    // color: #161a1f;
    color: #575e6c;
    // font-size: 14px;
    font-weight: bold;
    line-height: 1.8;
  }
  .card-num {
    color: #575e6c;
    font-size: 14px;
  }

  .btn {
    background: #3ebde0;
    color: #fff;
    border: solid 1px #3ebde0;
    border-radius: 6px;
  }

  .btn_small {
    background: none;
    color: #3ebde0;
    border: solid 1px #3ebde0;
    padding: 0 12px;
    
  }

  .patient-body {
    padding: map-get($spaces, sm);
    padding-bottom: 0px;
    line-height: 2;
  }
  .patient-footer {
    border-top: solid 1px map-get($border-colors, lighter);
    .item + .item {
      border-left: solid 1px map-get($border-colors, lighter);
    }

    .btn {
      border-radius: unset;
      border: none;
    }
  }
}

.color_2 {
  color: #a7a6a5;
}
</style>

